<template>
    <div>
        <div class="top">
            <p>
                <img src="../../assets/img/title2.png" alt="" />
            </p>
            <div>
                <van-notice-bar class="continer" left-icon="volume-o" scrollable
                    text="迎接圣诞，活动的时间为12月22日至12月25日，秒杀专区五折专区最高立减30元和半价满减。" />
            </div>
            <div class="window">
                <p>
                    <img src="../../assets/img/logo2.jpg" alt="" />
                </p>
                <div>
                    <h4>吃了吗（回龙观店）</h4>
                    <span>蜂鸟专送/38分钟送达</span>
                    <span>
                        <i class="iconfont">&#xe600;</i>
                        在线支付满28减5
                    </span>
                </div>
            </div>
        </div>
        <div class="main1">
            <van-cell is-link @click="showPopup" class="more">更多精彩活动...</van-cell>
            <van-popup v-model="show" closeable position="bottom" :style="{ height: '100%' }">
                <div class="cons">
                    <div>
                        <p>吃了吗 &nbsp;(回龙观店)</p>
                    </div>

                    <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee"
                        class="star" />
                    <div class="main2">
                        <van-divider :style="{ borderColor: 'yellow'}">优惠信息</van-divider>
                        <p><i class="iconfont" style="color: yellowgreen;">&#xe619;&nbsp;</i>vc无限果汁全场八折</p>
                        <p><i class="iconfont" style="color: tomato;">&#xe60d;&nbsp;</i>单人精彩套餐</p>
                        <p><i class="iconfont" style="color: pink;">&#xe764;&nbsp;</i>该商家支持发票，请写好发票抬头</p>
                        <p><i class="iconfont" style="color: orange;">&#xe600;&nbsp;</i>在线支付满28减5</p>
                        <p><i class="iconfont" style="color: yellow;">&#xe602;&nbsp;</i>免费提供黄油</p>
                    </div>
                    <div class="main3">
                        <van-divider :style="{ borderColor: 'yellow'}">商家公告</van-divider>
                        <span>吃了吗，是张俊在2020年创立的一家主营炸鸡的餐饮品牌,童子炸鸡开创者。从创始至今,逐步成为一家以店铺连锁加盟体系为主、专业从事鸡肉以及相关产品生产销售的餐饮品牌.</span>
                    </div>
                    <div class="main4">
                        <img src="../../assets/img/2.jpg" alt="">
                    </div>
                </div>
            </van-popup>
        </div>
        <div class="wrapper" ref="wrapper" :style="{ overflow: 'auto', height: height + 'px' }">
            <div>
                <div class="middle">
                    <div>吃了吗 (回龙观店)</div>
                    <div>
                        <van-rate v-model="value" icon="like" void-icon="like-o" :count="5" class='heart' />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>月售90单</span>
                    </div>
                    <div>

                    </div>
                </div>
                <div class='middle2'>
                    <ul>
                        <li>
                            <p>起送价</p>
                            <span>50</span>
                            <span>元</span>
                        </li>
                        <li>
                            <p>商家配送</p>
                            <span>9</span>
                            <span>元</span>
                        </li>
                        <li>
                            <p>平均配送时间</p>
                            <span>32</span>
                            <span>分钟</span>
                        </li>
                    </ul>
                </div>
                <div class='middle3'></div>
                <div class="bottom">
                    <p>公告与活动</p>
                    <p>粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
                    </p>
                    <ul>
                        <li><i class="iconfont" style="color: yellowgreen;">&#xe619;&nbsp;</i>vc无限果汁全场八折</li>
                        <li><i class="iconfont" style="color: tomato;">&#xe60d;&nbsp;</i>单人精彩套餐</li>
                        <li><i class="iconfont" style="color: pink;">&#xe764;&nbsp;</i>该商家支持发票，请写好发票抬头</li>
                        <li><i class="iconfont" style="color: orange;">&#xe600;&nbsp;</i>在线支付满28减5</li>
                        <li><i class="iconfont" style="color: yellow;">&#xe602;&nbsp;</i>免费提供黄油</li>
                    </ul>
                </div>
                <div class='middle3'></div>
                <div class="mine">
                    <p>商家实景</p>
                    <div class="swiper-container" ref='swiper-container'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (1).jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (2).jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (3).jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (4).jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (5).jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img style='width:120px' src="../../assets/img/3 (6).jpg" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class='middle4'></div>
                <div class="last">
                    <p>商家信息</p>
                    <ul>
                        <li>该商家支持发票,请下单写好发票抬头</li>
                        <li>品类:其他菜系,不限菜系</li>
                        <li>北京市昌平区回龙观西大街龙观置业大厦底商B座</li>
                        <li>营业时间:10:00-20:30</li>
                    </ul>
                </div>
                <div class="music">
                    <img class='code' src="../../assets/img/music2.jpg">
                    <div class="xin">
                        <audio ref="audio" :src="soonUrl"></audio>
                        <div class='play' @click='play'>
                            <img src="../../assets/img/black.jpg">
                        </div>
                        <div class='prase' @click='prase'>
                            <img src="../../assets/img/blackred.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gohome" @click="gohome">
            <i class="iconfont icon-tuichu"></i>
        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import {
        NoticeBar
    } from "vant";
    Vue.use(NoticeBar);
    import {
        Popup
    } from "vant";
    Vue.use(Popup);
    import {
        Rate
    } from 'vant';
    Vue.use(Rate);
    import {
        Divider
    } from 'vant';
    Vue.use(Divider);
    import 'swiper/swiper-bundle.min.css'
    import Swiper from 'swiper'
    import BScroll from "better-scroll";
    // import aplayer from 'vue-aplayer'
    export default {
        data() {
            return {
                show: false,
                value: 5,
                mySwiper: null,
                height: 500,
                bs: null,
                pageNum: 1,
                soonUrl: require("../../assets/music/Children's Christmas Favorites - Jingle Bells.mp3"),
                isfade: false,
            };
        },
        created() {
            // 底部菜单隐藏
            this.$store.state.footerNavShow = false
        },
        mounted() {
            this.$nextTick(() => {
                // 等所有异步结束，操作真实dom
                this.mySwiper = new Swiper(this.$refs['swiper-container'], {
                    // direction: 'vertical', // 垂直切换选项
                    loop: false, // 循环模式选项
                    slidesPerView: 3,
                })
                this.bs = new BScroll(this.$refs["wrapper"], {
                    // 默认better-scroll会让click事件不生效，需要开启
                    click: true,
                    // 解决移动站点中300ms的延时点击问题
                    // tap: "tap",
                    // 滚动事件触发时机
                    probeType: 1,
                    // 拖动到底部配置
                    pullUpLoad: true,
                    // 下拉配置选项
                    pullDownRefresh: true,
                });
            });
        },
        methods: {
            showPopup() {
                this.show = true;
            },
            play() {
                this.$refs.audio.play(); //点击触发 点击音效
                console.log(this.$refs.audio)
            },
            // if( this.$refs.audio.play())
            prase() {
                this.$refs.audio.pause();
            },
            gohome(){
                this.$store.state.footerNavShow = true
                this.$router.push("/home")
            }

        },
        components: {
            // aplayer
        }
    };
</script>

<style lang="scss" scoped>
.gohome{
  height: 25px;
  width: 25px;
  border-radius: 50%;
  // background: #e4cd88;
  color: #666;
  position: fixed ;
  top: 15px;
  right: 30px;
  text-align: center;
  i{
    line-height: 25px;
    
  }
}
    * {
  margin: 0;
  padding: 0;
}
html,
body {
  touch-action: none;
  height: 100%;
  ul,
  li {
    list-style: none;
  }
}
    .top {
        position: relative;

        p {
            width: 375px;
            height: 106px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .continer {
            color: #ed4c0d;
            background: #f5e23c;
            height: 28px;
            font-size: 12px;
        }

        .window {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;

            p {
                width: 64px;
                height: 64px;
                margin-right: 15px;

                /* border-radius:50%; */
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            div {
                h4 {
                    color: white;
                    letter-spacing: 2px;
                }

                span:nth-of-type(1) {
                    color: rgb(6, 117, 52);
                    display: block;
                    font-size: 14px;
                    letter-spacing: 1px;
                }

                span:nth-of-type(2) {
                    color: white;
                    display: block;
                    font-size: 14px;
                    letter-spacing: 1px;

                    i {
                        color: #b2282e;
                    }
                }
            }
        }
    }

    .main1 {
        .more {
            background: #f5f5f5;
        }

        .cons {
            position: relative;
            height: 667px;
            width: 375px;
            color: cadetblue;
            background: #f6f6f6;

            /* margin:auto ; */
            div:nth-of-type(1) {
                width: 375px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                padding-top: 20px;
                font-weight: bold;
                font-size: 18px;
                letter-spacing: 1px;
            }

            .star {
                padding-top: 20px;
                margin-left: 112px;
            }
        }
    }

    .main2 {
        p {
            margin-left: 50px;
            font-size: 14px;
            line-height: 20px;

            i {
                font-size: 20px;
            }
        }

    }

    .main3 {
        span {
            display: inline-block;
            width: 300px;
            padding-left: 40px;
            font-size: 14px;
            line-height: 20px;
        }
    }

    .main4 {
        position: absolute;
        top: 420px;
        right: 3px;
        height: 180px;
        width: 210px;

        img {
            width: 100%;
            height: 100%;
        }

    }

    .middle {
        position: relative;
        width: 330px;
        height: 65px;
        margin: auto;
        /* margin-bottom: 10px; */
        /* background:orange; */
        border-bottom: 1px solid #f4f4f4;

        div:nth-of-type(1) {
            height: 20px;
            line-height: 30px
        }

        div:nth-of-type(2) {
            height: 20px;
            line-height: 50px;

            span {
                font-size: 14px;
                color: #aaa;
            }
        }

        .heart {
            position: absolute;
            left: 68px;
            top: 33px;
        }

        /* div:nth-of-type(3){
        position:absolute;
        right:0px;
        top:2px
    } */
    }

    .middle2 {
        width: 330px;
        margin: auto;
        border-bottom: 1px solid #f4f4f4;

        ul {
            display: flex;
            justify-content: space-between;

            /* flex-direction:row; */
            li {
                width: 110px;
                height: 80px;
                line-height: 35px;
                /* background-color: orange; */
                text-align: center;

                p {
                    font-size: 14px;
                    color: #aaa;
                }

                span:nth-of-type(1) {
                    font-size: 25px;
                }

                span:nth-of-type(2) {
                    font-weight: 0;
                    font-size: 14px;
                    /* color:#aaa; */
                }
            }
        }
    }

    .middle3 {
        width: 375px;
        height: 13px;
        background-color: rgb(250, 178, 45);
        /* opacity: .6; */
        border: 1px solid rgb(253, 121, 98);
    }

    .bottom {
        width: 300px;
        height: 330px;
        margin: auto;

        /* background:rebeccapurple; */
        p:nth-of-type(1) {
            height: 35px;
            /* background:red; */
            line-height: 35px;
        }

        p:nth-of-type(2) {
            font-size: 14px;
            color: tomato;
        }

        li {
            height: 35px;
            /* background:red; */
            font-size: 13px;
            line-height: 35px;

            i {
                font-size: 18px;
            }
        }
    }

    .mine {
        p {
            width: 300px;
            height: 40px;
            /* background:red; */
            margin: auto;
            line-height: 40px;
        }

    }

    .swiper-container {
        width: 100%;
        height: 80px;

        img {
            width: 120px;
            height: 100%;
        }
    }

    .middle4 {
        width: 375px;
        height: 13px;
        background-color: rgb(250, 178, 45);
        border: 1px solid rgb(253, 121, 98);
        margin-top: 20px;
    }

    .last {
        p {
            height: 30px;
            width: 300px;
            line-height: 30px;
            margin: auto;
            /* background:red; */
        }

        li {
            margin: auto;
            width: 300px;
            height: 40px;
            line-height: 30px;
            font-size: 12px;
            border-bottom: 1px solid #f2f2f2;

        }
    }

    .music {
        height: 120px;
        width: 375px;
        position: relative;

        img {
            height: 100%;
            width: 100%;
            position: absolute;
            bottom: 20px;
            left: 0;
            z-index: 100;

        }
    }

    .xin {
        width: 30px;
        height: 20px;
        /* background-color: red; */
        position: relative;

        .play {

            /* height: 30px;
            width: 30px; */
            img {
                height: 100%;
                width: 100%;
                position: absolute;
                bottom: -6px;
                left: 70px;
                z-index: 101;
            }
        }

        .prase {

            /* height: 30px;
            width: 30px; */
            img {
                height: 100%;
                width: 100%;
                position: absolute;
                bottom: 0px;
                left: 100px;
                z-index: 101;
            }
        }

    }
</style>